<template>
  <view class="period-selector">
    <text class="label">筛选周期：</text>
    <view
      v-for="t in ['周', '月', '年']"
      :key="t"
      class="btn"
      :class="{ active: modelValue === t }"
      @click="$emit('update:modelValue', t)"
    >
      {{ t }}
    </view>
  </view>
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<style scoped>
.period-selector {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.label {
  margin-right: 20rpx;
}
.btn {
  padding: 8rpx 20rpx;
  margin-right: 16rpx;
  background: #eef2f7;
  border-radius: 8rpx;
  transition: all 0.2s;
}
.btn.active {
  background: #007aff;
  color: white;
}
</style>